<template>
  <div class='fwzc'>
    <div class="banner">
      <img :src = 'bannerImg'>
    </div>
    <div class='content'>
      <div class='xzzx'>
        <h2>下载中心</h2>
        <h3>Download Center</h3>
        <div class="xzzx-bottom">
          <ul class="download">
            <li v-for='(item , index) in download' :key='index' @mouseover="selectStyle(index)" @mouseout="outStyle(index)">
              <img :src='item.img'>
              <h4>{{item.title}}</h4>
              <p>{{item.text}}</p>
            </li>
          </ul>
          <ul class="videoWrap">
            <li v-for='(item , index) in videoMsg' :key='index'>
              <div class='videoImg' @click="wrapShow(index)">
                <img :src='item.img'/>
                <img class="play" src="../assets/images/play.png"/>
              </div>
              <p>{{item.title}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class='xxfk'>
        <h2>信息反馈</h2>
        <h3>Information Feedback</h3>
        <div class='xxfkMsg'>
          <h4>再这快速提交您想咨询的问题<img src="../assets/images/aircraft.gif" alt="" srcset=""></h4>
          <p>如果您希望以简单快速提交需求联系到我们并且快速得到解决办法</p>
          <p class='yourName' :class="yourNameStyle">您的称呼：<input type="text" v-model="yourName" placeholder="请在这里填写您的姓名" @focus='yourNameFours' @blur='yourNameBlur'></p>
          <p class='yourTel' :class="yourTelStyle">联系方式：<input type="text" v-model="yourTel" placeholder="请在这里填写您的联系方式" @focus='yourTelFours' @blur='yourTelBlur'></p>
          <div class="textarea" :class='yourDemandStyle'>
            <textarea placeholder='您想咨询哪方面的业务了？请您在此处简单描述。' v-model='yourDemand' @focus='yourDemandFours' @blur='yourDemandBlur'></textarea>
          </div>
          <p class='success' v-if='success'>{{success}}</p>
          <p class='tip' v-else>{{tip}}</p>
          <div class='save'>
            <input type="button" value="提交留言" @click='save'>
          </div>
        </div>
      </div>
    </div>
    <div :class="[videoWrap]" @click="wrapHide">
      <video @click.stop controls="controls" :src ='videoSrc' :poster='videoImg'></video>
    </div>
  </div>
</template>
<script>
import { setTimeout } from 'timers'
export default {
  name: 'Fwzc',
  data () {
    return {
      bannerImg: require('../assets/images/fwzcBanner.png'),
      download: [
        {
          img: require('../assets/images/download1.png'),
          imgShow: require('../assets/images/download1.png'),
          imgHide: require('../assets/images/download1_1.png'),
          title: '昆特企业介绍PPT',
          text: '昆特企业介绍PPT资料，涵盖公司介绍、产品体系案例介绍，以及售后服务等。'
        },
        {
          img: require('../assets/images/download2.png'),
          imgShow: require('../assets/images/download2.png'),
          imgHide: require('../assets/images/download2_1.png'),
          title: '昆特品牌标识VIS运用',
          text: '昆特品牌标识VIS基本运用，可根据实际场景选择使用。非本公司人员不得随意下载使用。'
        },
        {
          img: require('../assets/images/download3.png'),
          imgShow: require('../assets/images/download3.png'),
          imgHide: require('../assets/images/download3_1.png'),
          title: '昆特名片模版',
          text: '昆特官方最新公司名片模版，非本公司人员不得随意下载使用。'
        }
      ],
      videoMsg: [
        {
          video: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4',
          img: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.png',
          title: '企业宣传片'
        },
        {
          video: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4',
          img: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.png',
          title: '校园气象视频'
        },
        {
          video: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.mp4',
          img: 'http://120.78.209.238:8086/ylt/images/950fdf03926e079b4153d83b110766ed.png',
          title: '软件视频演示'
        }
      ],
      videoWrap: 'videoWrapHide',
      videoSrc: '',
      videoImg: '',
      yourName: '',
      yourTel: '',
      yourDemand: '',
      tip: '',
      yourNameStyle: '',
      yourTelStyle: '',
      yourDemandStyle: '',
      success: ''
    }
  },
  methods: {
    selectStyle (index) {
      this.download[index].img = this.download[index].imgHide
    },
    outStyle (index) {
      this.download[index].img = this.download[index].imgShow
    },
    wrapHide (e) {
      this.videoWrap = 'videoWrapHide'
      this.videoSrc = ''
    },
    wrapShow (index) {
      this.videoWrap = 'videoWrapShow'
      this.videoSrc = this.videoMsg[index].video
      this.videoImg = this.videoMsg[index].img
    },
    save () {
      this.success = ''
      var _this = this
      if (!this.yourName) {
        this.tip = '请输入您的称呼'
      } else if (!this.yourTel) {
        this.tip = '请输入您的联系方式'
      } else if (!this.yourDemand) {
        this.tip = '请输入您想咨询的业务'
      } else {
        console.log(this.yourName)
        console.log(this.yourTel)
        console.log(this.yourDemand)
        this.tip = ''
        this.success = '提交成功'
        setTimeout(function () {
          _this.success = ''
          _this.yourName = ''
          _this.yourTel = ''
          _this.yourDemand = ''
        }, 1000)
      }
    },
    yourNameFours () {
      this.yourNameStyle = 'yourNameStyle'
    },
    yourTelFours () {
      this.yourTelStyle = 'yourTelStyle'
    },
    yourDemandFours () {
      this.yourDemandStyle = 'yourDemandStyle'
    },
    yourNameBlur () {
      this.yourNameStyle = ''
    },
    yourTelBlur () {
      this.yourTelStyle = ''
    },
    yourDemandBlur () {
      this.yourDemandStyle = ''
    }
  }
}
</script>
<style lang="less" scoped>
.fwzc{
  .banner{
    width: 100%;
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .xzzx{
      padding-top: 80px;
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
      .xzzx-bottom{
        padding-top: 30px;
        .download{
          overflow: hidden;
          padding-bottom: 30px;
          padding-top: 20px;
          li{
            background:rgba(255,255,255,1);
            width: 320px;
            height: 180px;
            margin:0 20px 0 0;
            padding: 50px 30px;
            box-shadow:0px 2px 13px 2px rgba(2,10,12,0.06);
            border-radius:10px;
            float: left;
            cursor: pointer;
            &:first-of-type{
              margin-left: 10px;
            }
            &:last-of-type{
              margin-right: 10px;
            }
            &:hover{
              background:linear-gradient(45deg,rgba(32,166,196,1),rgba(126,213,233,1));
              h4{
                color: #ffffff;
              }
              p{
                color: #eeeeee;
              }
            }
            img{
              width: 80px;
              height:80px;
            }
            h4{
              font-size:26px;
              font-family:PingFang-SC-Bold;
              font-weight:bold;
              color:rgba(51,51,51,1);
              line-height:56px;
            }
            p{
              font-size:14px;
              font-family:PingFang-SC-Medium;
              font-weight:500;
              color:rgba(102,102,102,1);
              line-height:30px;
            }
          }
        }
        .videoWrap{
          overflow: hidden;
          li{
            float: left;
            width: 380px;
            margin:0 20px 0 0;
            &:first-of-type{
              margin-left: 10px;
            }
            &:last-of-type{
              margin-right: 10px;
            }
            .videoImg{
              position: relative;
              width: 380px;
              height: 280px;
              background: #eeeeee;
              box-shadow:0px 2px 13px 2px rgba(2,10,12,0.06);
              border-radius:10px;
              overflow: hidden;
              img{
                width:100%;
                height:100%;
                &.play{
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%,-50%);
                  z-index: 99;
                  width: 80px;
                  height: 80px;
                }
              }
            }
            p{
              font-size:26px;
              font-family:PingFang-SC-Bold;
              font-weight:bold;
              color:rgba(51,51,51,1);
              padding-top: 30px;
              text-align: center;
            }
          }
        }
      }
    }
    .xxfk{
      padding-top: 80px;
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
      .xxfkMsg{
        margin: 50px 0 80px;
        width:1100px;
        height: 580px;
        border:1px solid #d3d3d3;
        padding:50px;
        border-radius: 3px;
        h4{
          font-size:32px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(51,51,51,1);
          img{
            width: 660px;
            height: 34px;
            padding-left: 10px;
            vertical-align: middle;
          }
        }
        P{
          font-size:14px;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color: #999999;
          line-height: 30px;
          &:nth-of-type(2){
            margin-top: 50px;
          }
          &:nth-of-type(2),&:nth-of-type(3){
            line-height: 77px;
            font-size: 18px;
            color: #000000;
            font-family:'PingFang-SC-Medium';
            font-weight: bold;
            &.yourName{
              &:after{
                content:'';
                display: block;
                width:100%;
                height:1px;
                background: #EEEEEE;
                border-radius:1px;
              }
            }
            &.yourNameStyle{
              &:after{
                background:linear-gradient(90deg,rgba(32,166,196,1),rgba(126,213,233,1));
              }
            }
            &.yourTel{
              &:after{
                content:'';
                display: block;
                width:100%;
                height:1px;
                // background:linear-gradient(90deg,rgba(32,166,196,1),rgba(126,213,233,1));
                background: #EEEEEE;
                border-radius:1px;
              }
            }
            &.yourTelStyle{
              &:after{
                background:linear-gradient(90deg,rgba(32,166,196,1),rgba(126,213,233,1));
              }
            }
            input{
              line-height: 77px;
              width:960px;
              font-size: 18px;
              color: #666666;
              border: none;
              outline: none;
              padding: 0 20px;
              letter-spacing: 1px;
              &::placeholder{
                color: #999999;
              }
            }
          }
        }
        .textarea{
          margin-top: 20px;
           &:after{
            content:'';
              display: block;
              width:100%;
              height:1px;
              background: #EEEEEE;
              border-radius:1px;
           }
          &.yourDemandStyle{
            &:after{
              background:linear-gradient(90deg,rgba(32,166,196,1),rgba(126,213,233,1));
            }
          }
          textarea{
            font-size: 18px;
            width: 1094px;
            height: 170px;
            border: none;
            outline: none;
            resize:none;
            color: #666666;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            line-height:30px;
            letter-spacing: 1px;
          &::placeholder{
            color: #999999;
            }
          }
        }
        .tip{
          line-height: 50px;
          text-align: center;
          height: 50px;
          color: #f00f00;
          font-size: 16px;
        }
        .success{
          line-height: 50px;
          text-align: center;
          height: 50px;
          color: #4EBDD5;
          font-size: 16px;
        }
        .save{
          text-align: center;
          input{
            cursor: pointer;
            width:290px;
            height:60px;
            background:linear-gradient(90deg,rgba(32,166,196,1),rgba(126,213,233,1));
            box-shadow:0px 5px 13px 2px rgba(39,169,199,0.2);
            border-radius:3px;
            border: none;
            outline: none;
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
    }
  }
  .videoWrapShow{
    position:fixed;
    left:0;
    top:0;
    z-index:100;
    width:100vw;
    height:100vh;
    background: rgba(0,0,0,0.8);
    video{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
    }
  }
  .videoWrapHide{
    display: none;
  }
}
</style>
